<%@ include file="/taglibs.jsp"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<fmt:message key="date.format" var="df" scope="page"/>
<head>
	<title><fmt:message key="listFileByDepartmentForm.title"/></title>
	<style type="text/css">
		.web_dialog_overlay
		{
		   position: fixed;
		   top: 0;
		   right: 0;
		   bottom: 0;
		   left: 0;
		   height: 100%;
		   width: 100%;
		   margin: 0;
		   padding: 0;
		   background: #000000;
		   opacity: .15;
		   filter: alpha(opacity=15);
		   -moz-opacity: .15;
		   z-index: 101;
		   display: none;
		}
		.web_dialog
		{
		   display: none;
		   position: fixed;
		   width: 400px;
		   height: 250px;
		   top: 30%;
		   left: 50%;
		   margin-left: -190px;
		   margin-top: -100px;
		   background-color: #ffffff;
		   border: 2px solid #336699;
		   padding: 0px;
		   z-index: 102;
		   font-family: Verdana;
		   font-size: 10pt;
		}
		.web_dialog_title
		{
		   border-bottom: solid 2px #336699;
		   background-color: #336699;
		   padding: 4px;
		   color: White;
		   font-weight:bold;
		}
		.web_dialog_title a
		{
		   color: White;
		   background-color: #336699;
		   text-decoration: none;
		}
		.align_right
		{
		   text-align: right;
		}
	</style>
	<script type="text/javascript">
	function showDialog(param){
		var strIndex = param.id;
		var indexOfChar = strIndex.indexOf("|");
		var fileId = strIndex.substring(0,indexOfChar);
		var approverId = strIndex.substring(indexOfChar + 1,strIndex.length);
		$("#fileId").val(fileId);
		$("#approverId").val(approverId);
		ShowDialog(true);
       e.preventDefault();
	}
	
	function validate(){
		if($("#replyMessage").val() == ""){
			$("#error").html("B\u1EA1n ch\u01B0a nh\u1EADp n\u1ED9i dung ph\u1EA3n h\u1ED3i");
			return false;
		}
		return true;
	}
	
	function sendReply(){
		if(validate()){
			document.replyForm.submit();
		}
	}

	$(document).ready(function (){
      $("#btnClose").click(function (e)
      {
         HideDialog();
         e.preventDefault();
      });

      $("#btnCancel").click(function (e)
      {
         HideDialog();
         e.preventDefault();
      });

   });


   function ShowDialog(modal){
      $("#overlay").show();
      $("#dialog").fadeIn(300);

      if (modal)
      {
         $("#overlay").unbind("click");
      }
      else
      {
         $("#overlay").click(function (e)
         {
            HideDialog();
         });
      }
   }

   function HideDialog()
   {
	  $("#replyMessage").val("");
	  $("#error").html("");
      $("#overlay").hide();
      $("#dialog").fadeOut(300);
   }
	
	</script>
</head>

<!--  START display exchange messages   -->
<div id="overlay" class="web_dialog_overlay"></div>
<div id="dialog" class="web_dialog">
	<table style="width: 100%; border: 0px;" cellpadding="3" cellspacing="0">
      <tr>
         <td class="web_dialog_title"><fmt:message key="tasklist.listExchange.dialog.title"/></td>
         <td class="web_dialog_title align_right">
            <a href="#" id="btnClose"><img src="${ctx}/images/close.png" height="20" width="20"></a>
         </td>
      </tr>
	</table>

	<s:form name="replyForm" action="sendReplyMessage" method="post">
	      <table style="width: 100%; border: 0px;" cellpadding="3" cellspacing="0">
	      	<tr>
         		<td colspan="2"><b><fmt:message key="listFileByDepartmentForm.dialogmsg.content.title"/></b>
         			<input type="hidden" id="fileId" name="fileId">
         			<input type="hidden" id="approverId" name="approverId">
         		</td>
      		</tr>
		    <tr>
		         <td colspan="2"><textarea name="replyMessage" id="replyMessage" rows="5" cols="46"></textarea> </td>
		    </tr>
		    <tr>
		         <td colspan="2" style="text-align: center;">
		         	<button id="btnSubmit" type="button" class="button" onclick="sendReply()"> 
		         		<fmt:message key="listFileByDepartmentForm.dialogmsg.button.title"/>
		         		<img src="${ctx}/images/msg_send.png" align="left" height="20" width="20"> 
		         	</button> 
		         	<button id="btnCancel" type="button" class="button"> 
		         		<fmt:message key="tasklist.listExchange.dialog.button.ok"/>
		         		<img src="${ctx}/images/btn_cancel.png" align="left" height="20" width="20"> 
		         	</button>
		         </td>
		      </tr>
		  </table>
	</s:form>
</div>
<!--  END display exchange messages   -->

<!--  START display list file   -->
<table class="table">
	<tr>
		<td>
	    	<fmt:message key="listFileByDepartmentForm.header.title"></fmt:message>: <strong><s:property value="departmentName"/></strong>
		</td>
	</tr>
</table>
<s:set name="lstFileByDepartment" value="lstFileByDepartment" scope="request"/>
<display:table  name="lstFileByDepartment" class="table" requestURI="" id="files" export="false" pagesize="10" >
	<display:setProperty name="paging.banner.item_name" value="${item_name}"/>
	<display:setProperty name="paging.banner.items_name" value="${items_name}"/>
			        
    <display:column property="submitter" sortable="false" media="html" titleKey="file.sender" />
    <display:column property="receivedDate" sortable="false" media="html" titleKey="listFileByDepartmentForm.table.header.receiveDate" />
    <display:column property="regulationTime" sortable="false" media="html" titleKey="listFileByDepartmentForm.table.header.returnDate" />
    <display:column property="inprogress" sortable="false" media="html" titleKey="listFileByDepartmentForm.table.header.status" />
    <display:column property="approver" sortable="false" media="html" titleKey="listFileByDepartmentForm.table.header.user" />
    
    <display:column style="width:30px" sortable="false" href="${ctx}/file/viewFile.html" media="html" paramId="id" paramProperty="id" titleKey="button.detail.title">
        Xem
    </display:column>
    
    <display:column style="width:20px" titleKey="tasklist.listExchange.table.header.tool">
		<img src="${ctx}/images/btn_view.png" id="${files.id}|${files.approverId}" name="btnShowDialog" onclick="showDialog(this)" align="left" height="20" width="20">
	</display:column>
	
	
</display:table>
<script type="text/javascript">highlightTableRows("lstFileByDepartment");</script>
<!--  END display list file   -->

